<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width:500px;
				height:500px;
				border:1px solid red;
			}
		</style>
		<script>
			window.onload = function(){
				var cavBox = document.getElementById("cav");
				var ocav = cavBox.getContext('2d');
				
				//创建image图片对象
				var oImg = new Image();
				
				oImg.src = '1.png';
				oImg.onload = function(){
//					          图片对象    x y  w   h
					ocav.drawImage(oImg,  0,0,500,500);
				}

				
			}
		</script>
	</head>
	<body>
		<div id="box">
			<canvas id="cav" width="500" height="500"></canvas>
			
		</div>

	</body>
</html>
